import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, Text, SwiperItem, Image } from '@tarojs/components'
import { post } from '../../../service/api'
import './head.scss'

class Head extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      txts: [
        "欢乐家大平台正式上线！",
        "百草味年货盛典 满188减100",
        "欢乐家平台保障"
      ],
      scrollTop: 0,
      list: [],
    }
  }

  async componentDidMount() {

    const [res1, res2] = await Promise.all(
      [post('home/findacticle'),
      post('home/findheadlines')]);

    if (res1.data.code == 0) {
      this.setState({
        list: res1.data.rows
      })
    }
    if (res2.data.code == 0) {
      if (res2.data.rows.length == 1) {
        res2.data.rows = res2.data.rows.concat(res2.data.rows)
      }
      this.setState({
        txts: res2.data.rows
      })
    }
  }
  toPageSeach() {
    Taro.navigateTo({ url: "/pages/search/index" })
  }
  render() {
    const { txts, list } = this.state,
      { opacity } = this.props.opacity;
    return (
      <View className='h-head'>
        <Swiper
          className='test-h'
          indicatorDots
          circular
          indicatorColor='rgba(255,255,255,0.5)'
          indicatorActiveColor='#fff'
          autoplay>
          {list.map((item, index) => {
            return (
              <SwiperItem key={index}>
                <View className='demo-text-1 img-box'>
                  <Image className="img" src={item.logo} />
                </View>
              </SwiperItem>
            )
          })}
        </Swiper>
        <View className="h-search-box" style="background:rgba(255,255,255,{{opacity}});">
          <View className="address" style="opacity:{{opacity}}">
            <Image className="img" src={require('../../../asset/imgs/address.png')} />
            <Text>武汉</Text>
          </View>
          <View className="h-search"
            onClick={this.toPageSeach}
            style="background:rgba(240,240,240,{{opacity+0.7}});" >
            <Image className="img" src={require('../../../asset/imgs/search.png')} />
            <Text>看看你家的样子</Text>
          </View>
        </View>
        <View className="news">
          <View className="txt">今日头条</View>
          <View className="line"></View>
          <Swiper
            className='msg'
            vertical
            circular
            autoplay
            duration={2000}>
            {
              txts.map((item) => {
                return <SwiperItem className='msg-txt' key={item.id}>{item.title}</SwiperItem>
              })
            }
          </Swiper>
        </View>
      </View>
    )
  }
}
Head.defaultProps = {
  opacity: Number

}
export default Head
